@charset "utf-8";
/* CSS Document */

.banner_map {
            background: url('../images/mersyside map.png') center/cover no-repeat;
            display:flex;
            flex-wrap:wrap;
          justify-content: space-around;
            align-items: center;
            min-height: 300px; /* Adjust the min-height as needed */
            color: #fff;
        }
.banner_map_scotland {
            background: url('../images/scotland.png') center/cover no-repeat;
            display:flex;
            flex-wrap:wrap;
          justify-content: space-around;
            align-items: center;
            min-height: 300px; /* Adjust the min-height as needed */
            color: #fff;
        }
.banner_main_spp {
            background: url('../images/earner-cars-spp-driving-school.webp') center/cover no-repeat;
            display:flex;
            flex-wrap:wrap;
          justify-content: space-around;
            align-items: center;
	text-align: center;
            min-height: 500px; /* Adjust the min-height as needed */
            color: #fff;
	width: 100%;
        }

        .column {
            flex: 1;
            width: 100%; /* Take full width on small screens, equal width on larger screens */
            max-width: 300px; /* Limit the max width of each column */
            box-sizing: border-box;
            padding: 20px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin: 10px;
        }

        .learn-more {
            flex: 1;
            width: 100%;
            max-width: 300px;
            box-sizing: border-box;
            padding: 20px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin: 10px;
            text-align: center;
        }

    .banner_map    a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }

     .banner_map   h2 {
            font-size: 16px;
            margin-bottom: 10px;
        }

     .banner_map   p {
            font-size: 16px;
        }

        /* Media query for smaller screens */
        @media screen and (max-width: 600px) {
            .column,
            .learn-more {
                flex: 1 0 100%; /* Take full width on smaller screens */
            }
        }